<template>
	<h3>分销商申请</h3>
	<div class="item1">
		<el-form-item label="会员信息">
			<el-input
			style="width: 205px"
			placeholder="请输入"
			v-model="vipInfo"
			></el-input>
		</el-form-item>
		
		<el-form-item label="添加时间" label-width="100">
			<div class="block">
			    <el-date-picker 
					style="width:186px"
					v-model="timevalue"
					type="datetimerange"
					:shortcuts="shortcuts"
					range-separator="To"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
			    />
			  </div>
		</el-form-item>
		
	</div>

	<div  class="item2">
		<el-form-item label="状态" label-width="75px">
			<el-select
			 style="width: 208px"
			  v-model="searchData.status"
			  clearable
			  placeholder="选择状态"
			>
			  <el-option
			    v-for="item in statuoption"
			    :key="item.statuId"
			    :label="item.examineStatus"
			    :value="item.statuId"
			  />
			</el-select>
		</el-form-item>
		
		<el-button type="primary" @click="search">搜索</el-button>
		<el-button @click="reset">重置</el-button>		
	</div>
	<el-table :data="tableData" style="width: 100%;" height="35vh">
		<el-table-column prop="userName" label="会员信息" width="150" />
		<el-table-column label="上级推荐人" width="150">
			<template #default="{ row }">
			{{row.superiorId}}
			</template>
		</el-table-column>
		<el-table-column label="消费次数" width="150">
			<template #default="{ row }">
				{{row.costNum}}
			</template>
		</el-table-column>
		<el-table-column label="消费金额"  width="150">
			<template #default="{ row }">
				{{row.cost}}
			</template>
		</el-table-column>
		
		<el-table-column prop="createTime" label="申请时间"  width="150"/>
		<el-table-column prop="examineStatus" label="当前状态"  width="150"/>
		<el-table-column  label="操作" >
			<template #default="{ row }">
				<p class="mya" @click="detail(row)">详情</p>
				<div v-if="row.overauto==1">
					<p class="mya" @click="applyagree(row)">审核通过</p>
					<p class="mya" @click="applydisagree(row)" >审核拒绝</p>
				</div>
			</template>
		</el-table-column>
	</el-table>
	
	
	<el-pagination
		layout="prev,pager,next"
		:page-count="total"
		:page-size="pageSize"
		v-model:current-page="pageIndex"	
		@current-change="changePage"
	></el-pagination>
	
	<!-- 点击详情 -->
	<el-dialog v-model="dialogFormVisible1" title="详情" width="700">
	    <div class="detailsty">
			<ul>
				<li><span>头像：</span><img src="../../public/头像.png" /></li>
				<li>
					上级分销商：{{supertarder}}
				</li>
				<li>
					消费金额：{{cost ? cost : "无"}}
				</li>
				<li>
					当前状态：{{examineStatus}}
				</li>
			</ul>
			<ul>
				<li><span>昵称：</span>{{userName}}</li>
				<li>
					消费次数：{{costNum ? costNum : "无"}}
				</li>
				<li>
					申请时间：{{createTime}}
				</li>
			</ul>
		</div>
	  </el-dialog>
	<!-- 通过审核 -->
	<el-dialog v-model="dialogFormVisible2" title="提示" width="500">
	    <el-form >
	      <el-form-item >
			<div style="margin: 0 auto;">确定要通过该账号的申请吗？</div>
	      </el-form-item>
	    </el-form>
		<template #footer>
		  <div class="dialog-footer">
		    <el-button @click="dialogFormVisible2 = false">取消</el-button>
		    <el-button type="primary" @click="sure2">
		      确定
		    </el-button>
		  </div>
		</template>
	  </el-dialog>
	<!-- 拒绝审核 -->
	<el-dialog v-model="dialogFormVisible3" title="提示" width="500" >
	    <el-form>
			<div style="margin: 0 auto;width: 300px;">
				<p>确认拒绝该账号的申请吗？</p>
				<el-input
					type="textarea"
					:rows="4"
					v-model="disagreereason"
					style="width: 300px;"
					placeholder="请输入拒绝理由"
				></el-input>
			</div>
			
		</el-form>
		<template #footer>
		  <div class="dialog-footer">
		    <el-button @click="dialogFormVisible3 = false">取消</el-button>
		    <el-button type="primary" @click="sure3">
		      确定
		    </el-button>
		  </div>
		</template>
	</el-dialog>
	

</template>

<script setup>
import { ref,onMounted,reactive} from "vue";
import { 
	tarderapplylist,
	tarderapplydetail,
	tarderapplysearch,
	tarderapplyapproved,
	tarderapplyrefuse
	} from "@/api"
import { EditPen } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
let pageIndex=ref(1);
let pageSize=6;
let total=ref(0)
const tableData=ref([])
const dialogFormVisible1=ref(false)
const dialogFormVisible2=ref(false)
const dialogFormVisible3=ref(false)
//获取分销商申请列表
const gettrderapplyList = async ()=>{
	let res=await tarderapplylist({
		pageIndex:pageIndex.value,
		pageSize:pageSize,
		siteId:Number(sessionStorage.getItem("siteId")),
	})
	// console.log("分销商申请列表",res);
	tableData.value=res.list
	tableData.value.forEach(v=>{
		if(v.examineStatus=="未审批"){
			v.overauto=1;
		}
		// console.log(v);
	})
	total.value=res.pageCount
}
let vipInfo=ref()
let timevalue=ref()
let statu=ref('')
let statuoption=[
	{
		examineStatus:"未审核",
		statuId:"0"
	},
	{
		examineStatus:"审批已通过",
		statuId:"2"
	},
	{
		examineStatus:"审批未通过",
		statuId:"1"
	}
]
//搜索为空时自动调用一次全列表接口
let searchData = reactive({
	pageIndex:pageIndex.value,
	pageSize:pageSize,
	siteId:Number(sessionStorage.getItem("siteId")),
	"info":vipInfo,
	"status":"",
	startTime:"",
	endTime:""
})
const search= async()=>{
	if(timevalue.value){
		// console.log(timevalue.value)
		let startdata = timevalue.value[0].toLocaleString().split(" ")[0].replace(/\//g, '-')
		let startdataTime = timevalue.value[0].toLocaleString().split(" ")[1].replace(/:/g, '-')
		let startTime = startdata + " " + startdataTime
		let enddata = timevalue.value[1].toLocaleString().split(" ")[0].replace(/\//g, '-')
		let enddataTime = timevalue.value[1].toLocaleString().split(" ")[1].replace(/:/g, '-')
		let endtTime = enddata + " " + enddataTime
		searchData.startTime = startTime
		searchData.endTime = endtTime
	}
	// console.log("seacherData",searchData);
	let data = {}
	for( let key in (searchData)){
		if(searchData[key] ){
			// console.log(searchData[key])
			data[key] = searchData[key]
		}
	}
	// console.log("data",data);
	let res=await tarderapplysearch(data)
	// console.log(statu.value);
	// console.log("搜索",res);
	tableData.value=res.list
	total.value=res.pageCount
}	
const reset=()=>{
	vipInfo.value='';
	statu.value='';
	timevalue.value=''
	searchData.status='';
	gettrderapplyList()
}
const supertarder=ref('')
const examineStatus=ref('')
const userName=ref('')
const createTime=ref('')
const cost=ref('')
const costNum=ref('')
const detail= async(row)=>{
	dialogFormVisible1.value=true
	//申请详情
	let res=await tarderapplydetail({
		"examineId":row.examineId
	})
	// console.log("申请详情",res);
	supertarder.value=res.superior;
	examineStatus.value=res.examineStatus
	userName.value=res.userName
	createTime.value=res.createTime
	cost.value=res.cost
	costNum.value=res.costNum
}
const applyagree = async(row)=>{
	dialogFormVisible2.value=true
	sessionStorage.setItem("examineId",row.examineId)
}
const disagreereason=ref()
const applydisagree= async(row)=>{
	dialogFormVisible3.value=true
	sessionStorage.setItem("examineId",row.examineId)
}
const sure2= async()=>{
	let res=await tarderapplyapproved({
		"examineId": Number(sessionStorage.getItem("examineId"))
	})
	if(res==null){
		ElMessage({
		    message:"操作成功",
		    type: 'success',
		})
	}
	// console.log("操作",res);
	dialogFormVisible2.value=false
	gettrderapplyList()
}
const sure3= async()=>{
	let res=await tarderapplyrefuse({
		"examineId":Number(sessionStorage.getItem("examineId"))
	})
	if(res==null){
		ElMessage({
		    message:"操作成功",
		    type: 'success',
		})
	}
	// console.log("操作",res);
	dialogFormVisible3.value=false
	gettrderapplyList()
}


const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  }
]

//分页
const changePage=(page)=>{
	pageIndex.value=page;
	search()
}

onMounted(()=>{
	gettrderapplyList()
	
})
</script>

<style lang="less" scoped>
	.item2,.item1{
		display: flex;
		margin-left: 15px;
	}
	.el-button{
		margin-left: 15px;
	}
	h3{
		// margin-left: 50px;
		margin-bottom: 20px;
		// margin-top: 20px;
		display: flex;
		justify-content: space-between;
		// margin-right: 100px;
	}
	.mya{
		display: inline-block;
		color: #4b5db9;
		// width: 100px;
		text-align: center;
	}
	.detailsty{
		display: flex;
		width: 500px;
		margin: 0 auto;
		justify-content: space-evenly;
		// align-items: center;
		ul{
			width: 210px;
			list-style: none;
			li{
				height: 25px;
				display: flex;
				align-items: center;
				margin-bottom: 20px;
			}
		}
		img{
			width: 20px;
		}
	}
</style>